<template>
	<view class="nas-uploadList-body-item">
		<view class="nas-uploadList-body-left"><image :src="item.previewUrl" mode=""></image></view>
		<view class="nas-uploadList-body-info">
			<view class="nas-uploadList-info">{{ item.fileInfo.name }}</view>
			<view class="nas-uploadList-info"><u-line-progress :height="10" :show-percent="false" active-color="#4992ff" :percent="item.speed"></u-line-progress></view>
			<view class="nas-uploadList-info">
				<!-- 任务等待 -->
				<view class="netSpeed" v-if="item.taskStatus == 'pending'"><span style="font-size: 22rpx; color: #4992ff;">等待中</span></view>
				<!-- 任务失败 -->
				<view class="netSpeed" v-if="item.taskStatus == 'fail'">
					<span style="font-size: 22rpx; color: #e50017;">{{ '上传失败' }}</span>
				</view>
				<!-- 任务进行 -->
				<view class="netSpeed" v-if="item.taskStatus == 'start'">
					<span>{{ item.partSize }}/{{ item.totalSize }}</span>
					<!-- <span>{{ filterNet(item.fixedSliceSize * (item.sliceIndex + 1)) }}</span> -->
				</view>
				<!-- 任务暂停 -->
				<view class="netSpeed" v-if="item.taskStatus == 'pause'"><span style="font-size: 22rpx; color: #4992ff;">已暂停</span></view>
			</view>
		</view>
		<view class="nas-uploadList-body-right" @click="pause">
			<image v-if="item.taskStatus === 'start'" src="/static/nas-static/nas-gonow.svg" mode=""></image>
			<image v-if="item.taskStatus === 'pending' || item.taskStatus === 'pause'" src="/static/nas-static/nas-goupload.svg" mode=""></image>
			<image v-if="item.taskStatus === 'fail'" src="/static/nas-static/nas-update.svg" mode=""></image>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	components: {},
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		type: {
			type: String,
			default: 'upload'
		}
	},
	watch: {
		// 'data.taskStatus'(val) {
		// 	this.getDisplayIcon(val);
		// }
	},
	data() {
		return {};
	},
	created() {
		let data = this.item;
		let fileType = data.fileType;
		let fileName = data.fileInfo.name;
		let arr = fileName.split('.');
		let len = arr.length;
		let ext = arr[len - 1].toLocaleLowerCase();
		if (ext == 'mp3') {
			// 音频
			data.previewUrl = '/static/nas-static/nas-yinyue.svg';
		}
		if (ext == 'doc' || ext == 'docx') {
			data.previewUrl = '/static/nas-static/nas-upFile.svg';
		}
		if (ext == 'ppt' || ext == 'pptx') {
			data.previewUrl = '/static/nas-static/nas-upFile.svg';
		}
		if (ext == 'pdf') {
			data.previewUrl = '/static/nas-static/nas-upFile.svg';
		}
		if (ext == 'rar' || ext == 'zip' || ext == '7z' || ext == 'gz') {
			data.previewUrl = '/static/nas-static/nas-zip.svg';
		}
		if (ext == 'xls' || ext == 'xlsx') {
			data.previewUrl = '/static/nas-static/nas-upFile.svg';
		}
		if (ext == 'txt') {
			data.previewUrl = '/static/nas-static/nas-upFile.svg';
		}
		if (ext == 'mp4' || ext == 'mov') {
			data.previewUrl = '/static/nas-static/nas-shiping.svg';
		}
		if (ext == 'jpg' || ext == 'png' || ext == 'jpeg') {
			previewUrl = '/static/nas-static/nas-upImg.svg';
		}
		// this.getDisplayIcon(this.data.taskStatus);
	},
	mounted() {},
	computed: {
		...mapState(['nasUploadingList', 'nasMaxUploadTaskNums'])
	},
	methods: {
		// 点击状态按钮
		pause() {
			if (this.type === 'upload') {
				if (this.item.taskStatus == 'pending' || this.item.taskStatus == 'pause' || this.item.taskStatus == 'fail') {
					// 暂停或者等待
					let list = this.nasUploadingList.filter(item => item.taskStatus == 'start');
					if (list.length == this.nasMaxUploadTaskNums) {
						// 已达到最大任务数
						this.item.taskStatus = 'pending';
					} else {
						this.item.startUpload();
					}
				} else if (this.item.taskStatus == 'start') {
					this.item.pauseUpload();
				}
			} else {
				this.item.taskStatus == 'pause' ? this.item.goTo() : this.item.pauseDownload();
			}
		},

		// 计算网速
		filterNet: size => {
			let filterSize = '';
			if (size < 1024) {
				filterSize = size.toFixed(2) + 'B';
			} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
				filterSize = (Math.floor((size / 1024) * 100) / 100).toFixed(2) + 'KB';
			} else if (size / 1024 / 1024 >= 1) {
				filterSize = (Math.floor((size / 1024 / 1024) * 100) / 100).toFixed(2) + 'M';
			}
			return filterSize + '/s';
		}
	}
};
</script>

<style lang="scss" scoped>
.nas-uploadList-body-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 20rpx 10rpx 20rpx 40rpx;
}
.nas-uploadList-body-left {
	image {
		width: 82rpx;
		height: 82rpx;
	}
}
.nas-uploadList-body-info {
	margin-left: 16rpx;
	.nas-uploadList-info {
		width: 440rpx;
		&:nth-of-type(1) {
			font-family: HarmonyOS_Sans_SC;
			font-size: 28rpx;
			color: #333333;
			letter-spacing: 0;
			font-weight: 400;
		}
		&:nth-of-type(2) {
			margin: 0;
		}
		&:nth-of-type(3) {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: HarmonyOS_Sans_SC;
			font-size: 20rpx;
			color: rgba(128, 128, 128, 0.7);
			letter-spacing: 0;
			font-weight: 400;
		}
		.netSpeed {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #999;
		}
	}
}
.nas-uploadList-body-right {
	width: 56rpx;
	height: 56rpx;
	margin-left: auto;
	image {
		width: 56rpx;
		height: 56rpx;
	}
}
</style>
